<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import { fetchSearchInStaff, fetchStaffClear, fetchStaffDelete } from '@/service/api/group';
import GroupStaffEdit from './staff-edit.vue';
import GroupStaffUpload from './upload.vue';
defineOptions({ name: 'GroupStaff' });

const enable = ref(true);
const loading = ref(false);

interface Props {
  id: number;
}
const props = defineProps<Props>();
const params = reactive<Api.GroupEntity.GroupStaffSearchParams>({
  name: '',
  page: 1,
  size: 15,
  groupId: 0,
  operator: ''
});
const emit = defineEmits(['total', 'reload']);
const resp = ref({
  total: 0,
  records: [] as any
});
const item = ref<Api.GroupEntity.GroupStaffModel>({
  id: 0,
  name: '',
  phone: '',
  groupId: 0,
  operator: '',
  duty: '',
  remark: '',
  createdTime: '',
  updateTime: ''
});
const edit = ref();
const upload = ref();

function search() {
  enable.value = false;
  loading.value = true;
  fetchSearchInStaff(params).then(res => {
    enable.value = true;
    loading.value = false;
    resp.value.records = res.data.records;
    resp.value.total = res.data.total;
    emit('total', res.data.total);
  });
}

function sizeChange(size: number) {
  params.size = size;
  search();
}
function pageChange(page: number) {
  params.page = page;
  search();
}
function clear() {
  params.name = '';
  params.operator = '';
  params.page = 1;
  search();
}
function showEdit(model: Api.GroupEntity.GroupStaffModel) {
  Object.assign(item.value, model);
  edit.value.init(item);
}
function showAdd() {
  Object.assign(item.value, {
    id: 0,
    name: '',
    phone: '',
    groupId: props.id,
    operator: '',
    duty: '',
    remark: '',
    createdTime: '',
    updateTime: ''
  });
  edit.value.init(item);
}
function showUpload() {
  upload.value.init(props.id);
}
function clearStaff() {
  const str = `确定要清除${resp.value.total}条成员记录吗？`;
  window.$messageBox
    ?.confirm(str, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      // console.log('del', row);
      fetchStaffClear(params.groupId).then(res => {
        window.$message?.success('清除成功');
        emit('reload');
        search();
      });
    })
    .catch(() => {});
}

function del(row: Api.GroupEntity.GroupStaffModel) {
  const str = `确定删除${row.name}【${row.phone}】的成员吗？`;
  window.$messageBox
    ?.confirm(str, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      // console.log('del', row);
      fetchStaffDelete(row.id).then(res => {
        window.$message?.success('删除成功');
        emit('reload');
        search();
      });
    })
    .catch(() => {});
}

watch(
  () => props.id,
  () => {
    // console.log('props.id', props.id);
    if (props.id === 0) {
      resp.value.records = [];
      resp.value.total = 0;
      return;
    }
    params.groupId = props.id;
    search();
  },
  { immediate: true }
);
</script>

<template>
  <div>
    <ElCard>
      <template #header>
        <ElRow :gutter="25">
          <ElCol :lg="8" :md="8" :sm="12">
            <ElRadioGroup v-model="params.operator" @change="search">
              <ElRadioButton value="">全部</ElRadioButton>
              <ElRadioButton value="移动">移动</ElRadioButton>
              <ElRadioButton value="电信">电信</ElRadioButton>
              <ElRadioButton value="联通">联通</ElRadioButton>
              <ElRadioButton value="广电">广电</ElRadioButton>
            </ElRadioGroup>
          </ElCol>
          <ElCol :lg="6" :md="8" :sm="12">
            <ElInput v-model="params.name" placeholder="姓名或手机号码">
              <template #append>
                <ElButton @click="search">
                  <i class="fa fa-search">&nbsp;搜索</i>
                </ElButton>
              </template>
            </ElInput>
          </ElCol>
          <ElCol :lg="10" :md="8" :sm="12" style="text-align: right">
            <ElButton @click="clear()">
              <i class="fa fa-refresh">&nbsp;重置</i>
            </ElButton>
            <ElButton type="primary" @click="showAdd()">
              <i class="fa fa-plus">&nbsp;新增</i>
            </ElButton>
            <ElButton @click="showUpload()">
              <i class="fa fa-plus">&nbsp;批量导入</i>
            </ElButton>
            <ElButton @click="clearStaff()">
              <i class="fa fa-plus">&nbsp;清空成员</i>
            </ElButton>
          </ElCol>
        </ElRow>
      </template>

      <ElTable
        v-loading="loading"
        show-overflow-tooltip
        height="100%"
        border
        class="sm:h-full"
        :data="resp.records"
        row-key="id"
      >
        <ElTableColumn fixed type="index" align="center" width="40px" header-align="center" />
        <ElTableColumn label="姓名" prop="name" align="center" header-align="center" />
        <ElTableColumn label="手机号码" width="170px" prop="phone" align="center" header-align="center">
          <template #default="scope">【{{ scope.row.operator }}】{{ scope.row.phone }}</template>
        </ElTableColumn>
        <ElTableColumn label="职务" prop="duty" align="center" header-align="center" />
        <ElTableColumn label="备注" prop="remark" align="center" header-align="center" />
        <ElTableColumn label="创建时间" width="160px" prop="createdTime" align="center" header-align="center" />
        <ElTableColumn label="修改时间" width="160px" prop="updateTime" align="center" header-align="center" />
        <ElTableColumn fixed="right" align="center" label="操作" width="110px">
          <template #default="scope">
            <ElButtonGroup>
              <ElButton plain size="small" :disabled="enable == false" @click="showEdit(scope.row)">查看</ElButton>
              <ElButton plain size="small" :disabled="enable == false" @click="del(scope.row)">删除</ElButton>
            </ElButtonGroup>
          </template>
        </ElTableColumn>
      </ElTable>
      <template #footer>
        <div class="mt-20px flex justify-center">
          <ElPagination
            v-model:current="params.page"
            v-model:page-size="params.size"
            v-model:total="resp.total"
            :page-sizes="[10, 12, 15, 20, 25, 30, 40, 50, 75, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="sizeChange"
            @current-change="pageChange"
          />
        </div>
      </template>
    </ElCard>
    <GroupStaffEdit ref="edit" @reload-search="search" />
    <GroupStaffUpload ref="upload" @reload-search="search" />
  </div>
</template>
